<template>
  <div>
    <component
      ref="customForm"
      class="v-form-item-wrapper"
      :formModel="formModel"
      :is="componentItem?.component"
    />
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, defineExpose, ref, computed } from 'vue';
  import { customComponentsMap } from '../../../core/formItemConfig';
  import { IFormConfig } from '../../../typings/v-form-component';

  const props = defineProps({
    formModel: {
      type: Object,
      default: () => ({}),
    },
    formConfig: {
      type: Object as PropType<IFormConfig>,
      required: true,
    },
  });
  const customForm = ref();
  const componentItem = computed(() =>
    customComponentsMap.get(props.formConfig.formPath as string),
  );

  const validate = async function () {
    return customForm.value.validate();
  };

  defineExpose({
    validate,
  });
</script>
